<template>
  <el-main class="imageMain">
    <div class="top" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in list" :key="item.id">
          <el-card  class="mt-3" shadow="hover">
             <el-image :src="item.url"  fit="cover" style="width: 100%; height: 120px;"  :preview-src-list="item.url"/>
             <template #footer>
              <div class="flex justify-around text-blue-400 items-center mt-2 cursor-pointer">
               <span @click="handleRename(item)">重命名</span>
               <span @click="handleDelete(item.id)">删除</span>
              </div>
             </template>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom flex justify-center items-center">
      <el-pagination
        background
        layout="prev,pager,next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getList"
      />
    </div>
  </el-main>
  <Formdrawer ref="drawerRef" title="上传图片">
     <UploadImage></UploadImage>
  </Formdrawer>
</template>

<script setup>
import { ref } from "vue";
import { getMainImage, renameImage,removeImage } from "@/api/image.js";
import { showPrompt } from "@/composible/utils";
import { notify } from "@/composible/notify";
import Formdrawer from  '@/components/Formdrawer.vue'
import UploadImage from "@/components/UploadImage.vue";

//获取侧边栏的数据
const list = ref([]);
//分页
const currentPage = ref(1);
const total = ref(1);
const limit = ref(10);
const loading = ref(false);
const image_class_id = ref(168);

//获取数据
function getList(p = null) {
  if (typeof p == "number") {
    currentPage.value = p;
  }

  loading.value = true;
  getMainImage(image_class_id.value, currentPage.value)
    .then((res) => {
      list.value = res.list;
      total.value = res.totalCount;
      console.log(total.value);
      console.log(res);
    })
    .finally(() => {
      loading.value = false;
    });
}

function getData(id) {
  console.log(id);
  currentPage.value = 1;
  image_class_id.value = id;
  getList();
}

getData(168);



//重命名
function handleRename(item)
{
  
  showPrompt("重命名", item.name).then(res => {
    console.log(res);
    loading.value = true;
    renameImage(item.id, res.value).then(res => {
      notify("success","修改成功");
      getList();
    }).finally(() => {
      loading.value = false;
    })
  })
  
}

//删除图片
function handleDelete(id)
{
  loading.value = true;
  removeImage([id]).then(res => {
    notify("success", "删除成功");
    getList();
  }).finally(() => {
    loading.value = false;
  })
}

//获取上传图片的方法
const drawerRef = ref("null");
//打开上传图片的方法
function openUploadImage()
{
  drawerRef.value.open();
}
//关闭上传框
function closeUploadImage()
{
  drawerRef.value.close();
}

//将获取数据的方法暴露出去
defineExpose({
  getData,
  openUploadImage,
  closeUploadImage,
});

</script>

<style lang="less" scoped>
.imageMain {
  position: relative;
}

.imageMain .top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50px;
  overflow-y: auto;
}

.imageMain .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 50px;
}

.imageMain .top::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
}
.imageMain .top::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 滚动条轨道背景颜色 */
}
.imageMain .top::-webkit-scrollbar-thumb {
  background-color: skyblue; /* 滚动条滑块背景颜色 */
  border-radius: 4px; /* 滑块圆角 */
}
.imageMain .top::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* 鼠标悬停时滑块背景颜色 */
}
</style>